<!-- 资讯详情 -->

<template>
	<view class="content">
		<view class="header">
			<view class="header-logo">
				<image src="../../static/index/heade-logo-tuya.png" mode="widthFix"></image>
			</view>
			<view class="logo">
				<image src="../../static/index/logo-tuya.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<image :src="`../../static/title/${Index}.png`" mode=""></image>
			<view>
				<rich-text :nodes="data.detail.content"></rich-text>
				<view class="buy" @click="buy()">
					购票
				</view>
			</view>
		</view>
		<TabBar :current="0"></TabBar>
	</view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import TabBar from '@/components/TabBar.vue';
import { contentDetail } from '@/request/api/index.js';
import { ref, reactive } from 'vue';

const messageId = ref(null);
const Index = ref(null);

const data = reactive({
	detail: {}
});

onLoad((e) => {
	messageId.value = e.id;
	Index.value = e.index;
	getDetailData()
});

// 资讯详情
const getDetailData = async () => {
	let paramas = { content_id: messageId.value }
	const resultData = await contentDetail(paramas);
	data.detail = resultData.data
};
	
// 去购票
const buy = () => {
	uni.navigateTo({
		url: `/pages/index/address?img=${data.detail.cover_url}`
	})
}

</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			.header-logo > image {
				width: 100%;
				height: 330rpx;
			}
			.logo >image {
				width: 226rpx;
				height: 34rpx;
				position: absolute;
				top: 100rpx;
				left: 20rpx;
			}
		}
		.main {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			border-radius: 70rpx 70rpx 0rpx 0rpx;
			position: absolute;
			top: 200rpx;
			padding-top: 30rpx;
			padding: 30rpx 36rpx;
			box-sizing: border-box;
			image {
				width: 382rpx;
				height: 182rpx;
			}
			.buy {
				width: 300rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 800;
				font-size: 38rpx;
				margin: 0 auto;
				background-color: #000;
				text-align: center;
				color: #fff;
				border-radius: 50rpx;
				margin-bottom: 200rpx;
				margin-top: 50rpx;
				position: fixed;
				bottom: 200rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
		}
	}
</style>
